<template>
  <div class="footer">
    <div class="service">
      <dl>
        <dt>订单服务</dt>
        <dd>购买指南</dd>
        <dd>支付方式</dd>
        <dd>送货政策</dd>
      </dl>
      <dl>
        <dt>自助服务</dt>
        <dd>热点咨询</dd>
        <dd>预约购买</dd>
        <dd>订单物流</dd>
      </dl>
      <dl>
        <dt>媒体中心</dt>
        <dd>新闻动态</dd>
        <dd>官方视频</dd>
        <dd>图片资源</dd>
      </dl>
      <dl>
        <router-link tag="dt" to="/about" class="special">关注我们</router-link>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
      </dl>

    </div>
    <div class="copyright">
      <dt>Copyright &copy;2019 gstate.cn All rights reserved</dt>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Footer"
  }
</script>

<style lang="stylus" scoped>
  .footer {
    background: #000;
    color: #fff;
    padding: 30px 6% 10px;
  }
  .service {
    padding: 40px 0
  }
  .service dl {
    display: inline-block;
    margin-right: 10%;
  }
  .service dl dt {
    margin-bottom: 20%;
    font-size 12px;
    font-weight: 400;
    cursor: pointer;

  }
  .service dl dd {
    margin: 0;
    font-size: 12px;
    font-weight: 200;
    color: #e5e5e5;
    margin-bottom: 20%;
    cursor: pointer;
  }
  .service dl dt:hover, .service dl dd:hover {
    color: #ffc904
  }
  .special {
    color: #ffc904 !important;
    background: unset;
    box-shadow: unset;
    border-radius: unset;

  }
  .copyright {
    text-align: center;
    font-size: 12px;
    font-family: sans-serif
  }
</style>
